<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<html>
	<head>
	<link rel="icon" href="resources/img/favicon.png" type="image/x-icon" />
		<script src="resources/frontResources/bootstrap-3.0.2/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="resources/frontResources/bootstrap-3.0.2/css/jumbotron.css">
		<link rel="stylesheet" href="resources/frontResources/bootstrap-3.0.2/css/bootstrap.min.css">
		<script src="resources/frontResources/jquery/js/jquery-1.9.1.js"></script>
		<script src="resources\frontResources\Json\json2.js"></script>
		<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
		<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
		<script src="resources/js/componentesForm.js" type="text/javascript"></script>
	</head>
		<script type="text/javascript">
			$( document ).ready(function() {
			    var listItemFormAux = $("#dinamicInputNameHidden").val();
			    var listItemForm = jQuery.parseJSON(listItemFormAux);
			    formDinamico = " ";
			    for (var i=0; i < listItemForm.length; i++){
			        var item = listItemForm[i];
			        formDinamico = formDinamico+getRowWithComponent(item.nombre_campo,item.tipo_campo);
			    }
			    $("#contenedor").html(formDinamico);
			    $("#contenedor").show();
			});
		</script>	
<body>
<jsp:include page="../reutilizables/barraSuperior.jsp" flush="true"/>
<br>
<div class="container">
	<ol class="breadcrumb">
	  <li><a href="${ctx}/projecDetail.htm">Panel de Control</a></li>
	  <li class="active">Proyecto:<span style="font-weight: bold; color: black;">${layerCreateCommand.selectedProject.name}</span></li>
	</ol>
	<c:set var="ctx" value="${pageContext.request.contextPath}" />
	<form:form  cssClass="form-horizontal" action="${ctx}/layerCreate.htm" commandName="layerCreateCommand"  id="formulario" role="form" method='POST' enctype="multipart/form-data" onsubmit="sendDinamicFormToserver()">
		  <div class="form-group">
		    	<label for="inputNameProject" class="col-sm-2 control-label">Nombre de la Capa</label>
		    	<div class="col-sm-10">
		    		<form:input cssClass="form-control" id="layerName" path="layerName" disabled="true"/>
		    	</div>
		  </div>		
		  
		  <!-- Contenedor form select -->
		  <div class="form-group">
		  		<label for="inputNameProject" class="col-sm-2 control-label">Tipo de la Capa</label>
		  		<div class="col-sm-10">
			  		<form:select path="typeLayer" cssClass="form-control" cssStyle="width: 314;" id="typeLayer" name="typeLayer" disabled="true">
					   <form:option value="NONE" label="--- Select Layer ---"/>
					   <form:options items="${layerType}" />	  		
			  		</form:select>
			  	</div>	
		</div>	 
	
		<!-- Este div es para contener el formulario que el usuario va armando.  -->
		<div class="form-group">
			<label for="inputNameProject" class="col-sm-2 control-label">Formulario de Carga</label>
				<div id="contenedor" class="form-group col-sm-10" style="width:950px; margin-left:15px; border: 1px solid #CCC; border-radius: 4; padding: 15px 0px 15px 0px;">
					<p class="text-muted">&nbsp;&nbsp; - En este lugar se muestra el formulario que se esta creando. Usado para la porterior carga de datos en la capa que se esta creando.</p>
				</div>
		</div>	  
		   
		<div id="contenedorMarkerSelected" class="form-group">
				<div class="form-group">
			      	<label for="inputNameProject" class="col-sm-2 control-label">Marcador Seleccionado</label>
					<div id="idMarkerSelected"class="col-sm-10">
	 					<img src="resources/img/markers/${markerSelected}"/>
					</div>
				</div>		
		</div>	
		
		<div class="alert alert-warning" class="form-group">
			<b>La capa que Ud. esta por crear tiene el siguiete contenido, esto es corecto.<b>
		</div>
		
			<!-- Botonera ppal -->
		<div class="form-group">
		    	<div class="col-sm-offset-2 col-sm-10">
		      		<button type="submit" name="_target1" class="btn btn-warning">Anterior</button>
		      		<button type="submit" name="_finish" class="btn btn-warning">Siguiente</button>
		      		<button type="button" class="btn btn-warning" onclick="window.location = '<%=request.getContextPath()%>/projecDetail.htm'">Cancelar</button>
		    	</div>
		</div>
		<!-- En este input se cargan los items mediante json que hacen a los datos que el usuario cargara en las capasCustom -->
		<form:input type="hidden" path="dinamicInputNameHidden" id="dinamicInputNameHidden" name="dinamicInputNameHidden"/>		  	  
	</form:form>
</div>	

</body>
</html>